<template>
    <div class="listDiv pd10">
        <div class="searchDiv mb20">
            <div class="flex1"></div>
            <el-button type="primary" @click="add">添加知识库</el-button>
        </div>
        <div class="flex1 overflow-y">
            <div class="cards w100 flex-row wrap">
                <template v-for="(v,i) in obj.ary" :key="i">
                    <div v-if="v.id!='1834915414107365376'&&v.id!='1834894886206312448'" class="carditem pointer" @click="addFile(v)">
                        <div class="bg":style="getCardStyle(i)"></div>
                        <div class="content flex-column">
                            <div class="w100 flex-row ju-between">
                                <div class="name">{{ v.name }}</div>
                                <div class="flex-row-center">
                                    <el-icon class="editicon pointer mr5" size="20" style="color: #555;" @click.stop="edit(v)"><EditPen /></el-icon>
                                    <el-popconfirm title="确定要删除吗？" @confirm.stop="del(v)">
                                        <template #reference>
                                            <el-icon @click.stop="()=>{}" class="editicon pointer" size="20" style="color: #555;"><Delete /></el-icon>
                                        </template>
                                    </el-popconfirm>
                                </div>
                            </div>
                            <div class="description">{{ v.description }}</div>

                            
                            <div class="flex1"></div>
                            <div class="w100 flex-row-center">
                                <div class="desc flex-row-center"><span class="lineOne" style="width: 100px;">ID:{{ v.id }}</span><el-icon class="pointer" @click="proxy.$util.copyText(v.id)"><DocumentCopy /></el-icon></div>
                                <div class="desc flex-row-center">{{ v.word_num }}字</div>
                                <div class="desc flex-row-center">文档大小{{ v.document_size }}k</div>
                            </div>
                        </div>
                    </div>
                </template>
            </div>
        </div>
        <div class="flex-center mt10">
            <el-pagination
                background
                size="small"
                @size-change="init()"
                @current-change="init()"
                v-model:current-page="obj.req.page"
                v-model:page-size="obj.req.size"
                :page-sizes="[10, 20, 50, 100]"
                layout="total, sizes, prev, pager, next, jumper"
                :total="obj.req.count">
                </el-pagination>
        </div>

        <el-drawer v-model="obj.drawer.show" :title="obj.drawer.title" size="50%" direction="rtl" :close-on-click-modal="false" destroy-on-close>
            <KnowledgeEdit :data="obj.drawer.data" @init="init" @close="obj.drawer.show = false" />
        </el-drawer>
    </div>
</template>
<script setup>
    import { reactive,getCurrentInstance,onMounted,computed } from 'vue'
    import { Edit, Delete, DocumentCopy, EditPen } from '@element-plus/icons-vue'
    import KnowledgeEdit from './knowledgeEdit.vue'
    let { proxy } = getCurrentInstance()

    let obj = reactive({
        drawer: {
            show: false,
            title: "",
            data: {}
        },
        req:{
            page: 1,
            size: 10,
            count: 0,
            
        },
        ary:[],
        config: {}
    })

    onMounted(async()=>{
        const token_ = await getToken()
        sessionStorage.setItem("token_", token_)
        setTimeout(() => {
            init()
        }, 0);
    })

    const getCardStyle = computed(()=>{
        return (i)=>{
            return {
                'background': obj.ary[i].background||'green',
            }
        }
    })

    let getToken = () => {
        return new Promise((resolve, reject) => {
            proxy.$ajax({
                url: '/manager/getToken',
                data: {},
                bfLoading: true
            }).then(d => {
                resolve(d.msg)
            }).catch(e => {
                reject('')
            })
        })
    }

    let init = (t) => {
        obj.ary = []
        proxy.$ajax({
            baseURL: 'https://open.bigmodel.cn/api/paas/v4/knowledge',
            url: '',
            method: 'get',
            data: obj.req,
            isParams: true,
            isResovle: true,
        }).then(d => {
            if(d.list&&d.list.length){
                obj.ary = d.list
                obj.req.count = d.total
            }else{
                obj.ary = []
                obj.req.count = 0
            }
        }).catch(() => { })
    }

    let add = () => {
        obj.drawer.show = true
        obj.drawer.title = "添加知识库"
        obj.drawer.data = {};
    }

    let edit = x => {
        obj.drawer.show = true
        obj.drawer.title = "修改知识库"
        obj.drawer.data = {
            id: x.id,
            embedding_id: x.embedding_id||3,
            name: x.name||'',
            description: x.description||''
        };
    }

    let del = x => {
        proxy.$ajax({
            baseURL: `https://open.bigmodel.cn/api/paas/v4/knowledge/${x.id}`,
            url: '',
            method: 'delete',
            data: {},
            isResovle: true,
        }).then(d => {
            proxy.elMessageMixin("删除成功", 'success')
            init()
        }).catch(() => { })
    }

    const addFile=(x)=>{
        proxy.routerPushMixin('knowledge/files', { id: x.id, name: x.name })
    }
</script>

<style lang="scss" scoped>
.listDiv{min-width: 1256px;overflow: hidden;}
.cards{
    min-width: 1260px;
    .carditem{
        position: relative;
        width: calc(25% - 9px); min-width: 300px; height: 220px;border-radius: 20px;overflow: hidden;
        margin-right: 12px;margin-bottom: 12px;
        padding: 20px; box-sizing: border-box;
        background: #f0f0f0;
        .bg{
            position: absolute;left: 0;top: 0;width: 100%;height: 100%;z-index: 0;
            opacity: 0.3;
        }
        .content{
            position: relative;z-index: 1;width: 100%;height: 100%;
            .editicon{padding: 5px;border-radius: 10px;}
            .editicon:hover{background: rgba(0,0,0,0.1);}
            .name{font-size: 20px;font-weight: bold;color: #000;margin-bottom: 5px;}
            .description{font-size: 14px;color: #444;}
            .desc{
                position: relative;padding-right: 6px;margin-right: 6px;color: #555;
            }
            .desc::after{
               content: '';position: absolute;right: 0;top: 50%;margin-top: -6px;width: 1px;height: 12px;background: #888;
            }
            .desc:last-child::after{width: 0 !important;}
        }
    }
    .carditem:nth-child(4n){margin-right: 0;}
}
</style>